<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { useToast } from 'wot-design-uni'
import { reactive, ref } from 'vue'
import { loginAPI, registerAPI, getUserInfoAPI } from '@/api/user'
import useTokenStore from '@/stores/token'
import useUserInfoStore from '@/stores/userInfo'

const toast = useToast()
onLoad((option) => {
  if (option && option.code === "401") {
    toast.warning({
      msg: '登录状态已过期，请重新登录',
      position: 'top'
    })
  }
})
const model = reactive<{phone: string, password: string, confirmPassword: string, role: number}>({
	phone: '',
	password: '',
	confirmPassword: '',
	role: 0
})
const resetForm = () => {
  Object.assign(model, {
    phone: '',
    password: '',
    confirmPassword: '',
    role: 0
  })
}
const isRegister = ref(false)
const tokenStore = useTokenStore()
const userInfoStore = useUserInfoStore()
const loginOrRegister = async () => {
  // 校验
	if (model.phone === '' || model.password === '') return toast.show("手机号和密码不能为空")
  if (isRegister.value && model.confirmPassword === '') return toast.show("确认密码不能为空")
  if (!/^1[3-9]\d{9}$/.test(model.phone)) return toast.show("手机号格式不正确")
  if (!/^[0-9a-zA-Z]{6,20}$/.test(model.password)) {
    return toast.show("密码格式不正确，密码为6到20位的数字和大小写字母组合")
  }
  if (isRegister.value && !/^[0-9a-zA-Z]{6,20}$/.test(model.confirmPassword)) {
    return toast.show("确认密码格式不正确，确认密码为6到20位的数字和大小写字母组合")
  }
  if (model.role !== 0 && model.role !== 1) return toast.show("请选择角色")
  if (isRegister.value && model.password !== model.confirmPassword) return toast.show("密码和确认密码不一致")

	// 登录或注册
	if (isRegister.value) {
		const res = await registerAPI(model)
		if (res.code === 200) toast.show("注册成功")
		else toast.show(res.msg)
	}
	else {
    const phone = model.phone
		const res = await loginAPI({ phone: model.phone, password: model.password, role: model.role })
    if (res.code === 200) {
			tokenStore.setToken(res.data.token)
      const resUserInfo = await getUserInfoAPI()
      if (resUserInfo.code === 200) userInfoStore.setUserInfo(resUserInfo.data, phone)
			toast.show("登录成功")
			await uni.reLaunch({url: '/pages/my/index'})
		}
		else toast.show(res.msg)
	}
}
const change = () => {
  resetForm()
	isRegister.value = !isRegister.value
}
//等三方微信登录
const wxLogin = () => {
  toast.show("功能开发中")
}
//第三方QQ登录
const QQLogin = () => {
  toast.show("功能开发中")
}
</script>

<template>
  <wd-toast />
  <view>
		<view class="img-a">
      <image style="width: 100%; height: 100%" src="@/static/images/head.png" />
			<view class="t-a">
				您好，
				<br />
				欢迎使用智行打车
			</view>
		</view>
		<view class="login-view">
			<view class="t-login">
				<wd-form :model="model">
					<view class="t-b">
						<wd-text text="手机号" :bold="true" color="#333"/>
						<wd-input
              custom-input-class="custom-input-class"
              clearable
              v-model="model.phone"
              placeholder="请输入手机号"
            />
					</view>
					<view class="t-b">
						<wd-text text="密码" :bold="true" color="#333"/>
						<wd-input
              custom-input-class="custom-input-class"
              clearable
              v-model="model.password"
              placeholder="请输入密码"
              show-password
            />
					</view>
					<view v-if="isRegister" class="t-b">
						<wd-text text="确认密码" :bold="true" color="#333"/>
						<wd-input
              custom-input-class="custom-input-class"
              clearable
              v-model="model.confirmPassword"
              placeholder="请输入确认密码"
              show-password
            />
					</view>
					<view class="t-b">
						<wd-text text="角色" :bold="true" color="#333"/>
						<view style="margin-top: 20rpx;">
              <wd-radio-group v-model="model.role" inline shape="dot" size="large">
                <view style="display: flex">
                  <wd-radio :value="0">乘客</wd-radio>
                  <view style="margin-left: 30rpx">
                    <wd-radio :value="1">司机</wd-radio>
                  </view>
                </view>
              </wd-radio-group>
            </view>
					</view>
					<wd-button
            @click="loginOrRegister"
            block
            custom-class="login-button"
          >
            {{ isRegister ? '注册' : '登录' }}
          </wd-button>
					<wd-button
            @click="change"
            block
            custom-class="register-button"
          >
            {{ isRegister ? '去登录' : '注册' }}
          </wd-button>
				</wd-form>
			</view>
			<view class="other-login">
				<view class="t-f"><text>—————— 第三方账号登录 ——————</text></view>
				<view class="t-e">
					<view @click="wxLogin"><image src="@/static/images/wx.png"></image></view>
					<view @click="QQLogin"><image src="@/static/images/qq.png"></image></view>
				</view>
			</view>
		</view>
	</view>
</template>

<style>
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.img-a {
	width: 100%;
	height: 450rpx;
	.t-a {
    position: fixed;
    top: 0;
		text-align: left;
		font-size: 46rpx;
		color: #fff;
		padding: 130rpx 0 0 70rpx;
		font-weight: bold;
		line-height: 70rpx;
	}
}
.login-view {
	width: 100%;
  height: 1004rpx;
	position: relative;
	margin-top: -120rpx;
	background-color: #fff;
	border-radius: 60rpx 60rpx 0 0;
	.t-login {
		width: 600rpx;
		margin: 0 auto;
		padding-top: 60rpx;
		.t-b {
			margin-bottom: 30rpx;
			:deep(.custom-input-class) {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
			}
		}
    :deep(.login-button) {
      margin: 40rpx 0 20rpx;
      background-color: #2796f2;
    }
    :deep(.register-button) {
      background-color: #f5f6fa;
      color: #000;
    }
	}
	.other-login {
		width: 100%;
		bottom: 0;
		position: fixed;
		.t-f {
			text-align: center;
			color: #aaaaaa;
			font-size: 28rpx;
		}
		.t-e {
			display: flex;
			justify-content: center;
			margin: 20rpx 0;
			image {
				width: 50rpx;
				height: 50rpx;
			}
			view:nth-child(1) {
				margin-right: 40rpx;
			}
		}
	}
}
</style>